<template>
  <div class="articleDetails">
    <NavBar />
    <div class="container">
      <div class="guid">
        <router-link :to="{path:'/'}">首页</router-link>
        <i>></i>
        <router-link :to="{path:'/viewpoint'}">观点</router-link>
        <i>></i>
        <span>正文</span>
      </div>
      <div class="con-lf w73">
        <div class="con w78 fr">
          <div class="txt-con item">
            <div class="head">
              <h1 class="ftz20">{{data.viewPoint.title}}</h1>
              <p class="clearfix">
                <span>{{data.viewPoint.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                <span class="mtl3">分类：{{data.viewPoint.classifyName}}</span>
                <span class="fr margin-top-10">
                  <img src="../../assets/res/img/icon_label.png">
                  <template v-for="(item,index) in data.viewPoint.tags">
                    <i v-if="index > 0" :key="'a' + item"> /</i>
                    <router-link :to="{name:'tags', params:{id:item}}" :key="'b' + index">{{item}}</router-link>
                  </template>
                </span>
              </p>
            </div>
            <div class="text">
              <div class="abstr">
                <div class="title ftz16">摘要</div>
                <div class="txt">{{data.viewPoint.summary}}</div>
              </div>
              <div class="text-con" id="textCon">
                <div v-html="data.viewPoint.details"></div>
              </div>
              <div class="state">
                <i>【免责声明】</i>本页面内容不代表平台观点，仅供您参考与学习观摩，您应自主投资决策，自行承担投资风险与损失！
              </div>
              <div class="reward">
                <span class="ml232">此篇文章很值</span>
                <span class="ml86">赞赏激励一下</span>
                <button id="reward" @click="showReward">赏</button>
              </div>
              <div class="reward-p">
                <span style="display: none" id="reward_aft">
                  <span class="images"><img src=""></span>
                  <span>等
                    <i>1</i>人已赞赏</span>
                </span>
                <span id="reward_bef">首席赞赏官虚位以待</span>
              </div>
              <div class="text-bot">
                <span class="mr10">阅读（{{data.viewPoint.hot}}）</span>
                <a href="javascript:void(0)" class="mr10" :class="{on: data.viewPoint.isPraise}" @click="updateCollectPraise(data.viewPoint)">
                  <img v-if="data.viewPoint.isPraise" src="../../assets/res/img/icon_hand_on.png">
                  <img v-else src="../../assets/res/img/icon_hand.png"> 赞{{data.viewPoint.praise > 0 ? data.viewPoint.praise: ''}}</a>
                <span>
                  <a href="javascript:void(0)" id="coll" state='0' @click="updateCollectList(data.viewPoint)">
                    <template v-if="data.viewPoint.isCollect === 0">
                      <img src="../../assets/res/img/icon_coll.png">收藏
                    </template>
                    <template v-else>
                      <img src="../../assets/res/img/icon_colled.png">取消收藏
                    </template>
                  </a>
                </span>
                <span class="fr">
                  <a v-if="data.enableReport === true" href="javascript:void(0)" class="mr10" id="report" @click="addAlarm()">举报文章</a>
                  <a v-if="data.enableReport === false" href="javascript:void(0)" class="mr10">已举报</a>
                  来源：中亿理投师
                </span>
              </div>
            </div>

          </div>

          <div class="recomm item">
            <div class="item-h">
              <span class="line"></span>
              <b class="ftz16">相关推荐</b>
            </div>
            <div class="recomm-con">
              <ul>
                <li v-for="(item,index) in data.relationViewPointList" :key="index">
                  <a href="javascript: void(0)" @click="changeArticle(item.viewPointId)" class="ftz16">{{item.title}}</a>
                </li>
              </ul>
            </div>
          </div>

          <comment :articleId="id" :authorId="data.viewPoint.userId" :articleType="1" />
        </div>

        <div class="txt-guid fl">
          <div class="item">
            <a href="javascript:void(0)" class="comm ftz16"><img src="../../assets/res/img/icon_txt.png">
              <span>评论</span>
            </a>
            <p>
              <span>分享到</span>
              <a href="javascript:void(0)"><img src="../../assets/res/img/icon_wechat.png" title="微信"></a>
              <a href="javascript:void(0)"><img src="../../assets/res/img/icon_sina.png" title="微博"></a>
            </p>
          </div>
          <div class="item">
            <span>上一篇</span>
            <i style="display:block;color:#ccc;padding:20px 0;" v-if="!data.previous.viewPointId">没有了</i>
            <p style="margin:0;cursor: pointer;" @click="changeArticle(data.previous.viewPointId)" v-else class="title">{{data.previous.title}}</p>
          </div>
          <div class="item">
            <span>下一篇</span>
            <i style="display:block;color:#ccc;padding:20px 0;" v-if="!data.next.viewPointId">没有了</i>
            <p style="margin:0;cursor: pointer;" v-else class="title" @click="changeArticle(data.next.viewPointId)">{{data.next.title}}</p>
          </div>
        </div>
      </div>

      <div class="con-rg w23 fr">
        <div class="person item">
          <div class="head">
            <a href="javascript: void(0)" @click="linkToDashboard(data.opinionLeader.userId)" class="photo"><img :src="data.opinionLeader.headImg"></a>
            <span class="name">
              <a href="javascript: void(0)" @click="linkToDashboard(data.opinionLeader.userId)">
                <b class="ftz16">{{data.opinionLeader.authName}}</b>
              </a>
              <span class="line" v-if="data.opinionLeader.authType === '1'"></span>
              <span v-if="data.opinionLeader.authType === '1'">{{data.opinionLeader.orgName}}</span>
            </span>
            <p class="intro">
              <span id="intro">{{data.opinionLeader.descreption}}</span>
              <!-- <a href="javascript:void(0)">展开↓</a> -->
            </p>
            <div class="label">{{{'1':'理投专家','2':'理投机构', '3': '理投达人'}[data.opinionLeader.authType]}}</div>
            <div class="appr"><img src="../../assets/res/img/icon_appr.png"></div>
          </div>
          <div class="bot">
            <button @click="focus()" :class="{'followed':data.opinionLeader.isMyFocus === '0'}">{{data.opinionLeader.isMyFocus === '0'?'已关注':'+关注'}}</button>
            <button @click.stop.prevent="showQuestionBox()" v-if="!data.opinionLeader.answerPay">免费提问</button>
            <button @click.stop.prevent="showQuestionBox()" v-if="data.opinionLeader.answerPay">提问</button>
          </div>
        </div>
        <div class="item viewpoint">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">Ta的观点</b>
            <a href="javascript:void(0)" class="fr">更多></a>
          </div>
          <div class="con">
            <ul>
              <li v-for="(item,index) in data.hisViewPointList" :key="index">
                <label>{{index+1}}</label>
                <div class="txt fr">
                  <p style="margin:0;cursor: pointer;" class="title" @click="changeArticle(item.viewPointId)">{{item.title}}</p>
                  <p>
                    <span>{{item.author}}</span>
                    <span class="fr">{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="live item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">Ta的直播</b>
            <a href="javascript: void(0)" @click="$router.push(`/liveRoom?roomId=${liveData.roomId}`)" class="fr">进入直播间></a>
          </div>
          <div class="con">
            <ul>
              <li class="live-test" v-for="(item,index) in liveData.messageChatList" v-if="!/<img/.test(item.contentText)" :key="index">
                <span class="time">{{item.createTime | parseTime('{m}-{d}')}}</span>
                <a @click="$router.push(`/liveRoom?roomId=${item.roomId}`)" class="info fr live-test" v-html="item.contentText"></a>
              </li>
            </ul>
          </div>
        </div>

        <div class="plan item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">Ta的计划</b>
            <a href="javascript:void(0)" @click="$router.push('/plan')" class="fr">更多></a>
          </div>
          <div class="con" v-if="data.plan">
            <div class="head">
              <a href="javascript:void(0)" class="img"><img src="http://static.zhongyi9999.com/upload/img/2018/12/4/1543904782949.png"></a>
              <p @click="$router.push('/plan/'+data.plan.planId)">
                <a href="javascript:void(0)" class="ftz16">{{data.plan.name}}</a>
                <i>{{data.plan.statusText}}</i>
              </p>
            </div>
            <div class="bot">
              <i>{{data.plan.saleNum}}</i>人已订阅
              <a @click="$router.push('/plan/'+data.plan.planId)" class="fr" href="javascript:void(0)">
                <span class="icon-coin"></span>{{parseFloat(data.plan.price)}}订阅</a>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 0;height: 0;overflow: hidden;">
        <div id="reportArt">
          <div class="margin-bottom-15">
            <div class='radio'>
              <input v-model="reportClassify" value="1" type='radio' id="classify1" title='广告垃圾信息' name='classify' checked>
              <label for="classify1" style="margin-right: 50px;">广告垃圾信息</label>
              <input v-model="reportClassify" value="2" id="classify2" type='radio' title='抄袭或未授权转载' name='classify'>
              <label for="classify2" style="margin-right: 50px;">抄袭或未授权转载</label>
              <input v-model="reportClassify" value="3" id="classify3" type='radio' title='其他' name='classify'>
              <label for="classify3">其他</label>
            </div>
            <textarea v-model="reportContent" class='text' placeholder='请写下举报的详细情况（选填）'></textarea>
          </div>
          <!-- <form class="layui-form">
            <div class="layui-form-item">
              <textarea class="layui-textarea" placeholder="请写下举报详细内容"></textarea>
            </div>
          </form> -->
        </div>
      </div>
    </div>
    <Footer />
    <reward v-if="reward" @close="reward=false" @next="payFunc" />
    <pay v-if="pay" :payInfo="{money:payMoney, viewPointId:id}" @close="pay=false" />
    <!-- 提问弹窗 -->
    <transition name="fade">
      <QuestionBox v-show="questionBoxFlag" @closeFn="closeQuestionBox" @submitFn="submitQuestion" :masterInfo="targetMasterInfo" />
    </transition>
  </div>
</template>
<script>
import reward from './reward'
import pay from './pay'
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import QuestionBox from '@/components/questionAnswer/question-box'
import Comment from '@/components/comment'
import * as api from '@/service/api'
import { mapState } from 'vuex'
import '../../style/res/content.scss'
export default {
  components: {
    NavBar,
    Footer,
    reward,
    pay,
    QuestionBox,
    Comment
  },
  data () {
    return {
      payMoney: 0,
      reward: false,
      pay: false,
      // id: this.$route.params.id,
      reportClassify: '1',
      reportContent: '',
      questionBoxFlag: false,
      // 提问的大咖
      targetMasterInfo: {
        id: '',
        name: '',
        avatar: '',
        comment: '',
        field: '',
        answerCount: '',
        answerPay: ''
      },
      data: {
        viewPoint: {},
        hisViewPointList: [],
        relationViewPointList: [],
        opinionLeader: {},
        previous: {},
        next: {}
      },
      liveData: {},
      pload: false
    }
  },
  async created () {
    this.getArticleDetail()
    await this.$store.dispatch('getUserInfo')
  },
  watch: {
    id (val) {
      this.getArticleDetail()
      this.$router.push({
        name: 'articleDetails',
        params: {
          id: val
        }
      })
      return val
    },
    scroll (val) {
      setTimeout(() => {
        if (val === 'bottom') {
          let height = document.getElementById('app').scrollHeight - 400
          document.documentElement.scrollTop = document.body.scrollTop = height
        }
      }, 1000)
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.me.sysUser || {}
    }),
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    id () {
      return this.$route.params.id
    },
    scroll () {
      return this.$route.query.scroll
    }
  },
  methods: {
    modifyUserFocusEvent () {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再关注！')
        return false
      }
      let eventName = this.data.opinionLeader.isMyFocus === '0' ? '取消关注' : '关注'
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认' + eventName + '吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          that.modifyUserFocus(that.data.opinionLeader)
          if (window.layer) {
            window.layer.closeAll()
          }
        }
      })
    },
    changeArticle (id) {
      this.$router.push(`/articleDetails/${id}`)
      document.documentElement.scrollTop = document.body.scrollTop = 0
    },
    linkToDashboard (itemId) {
      if (this.userId === itemId) {
        if (this.userInfo.authType === '0') {
          this.$router.push('/dashboardUser/live')
        } else {
          this.$router.push('/dashboardAuth')
        }
      } else {
        this.$router.push('/dashboard/live/' + itemId)
      }
    },
    async focus () {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再关注！')
        return false
      }
      await api.modifyUserFocus({
        focusUserId: this.data.opinionLeader.userId,
        focusStatus: this.data.opinionLeader.isMyFocus === '0' ? '1' : '0'
      })
      this.getArticleDetail()
    },
    async getArticleDetail () {
      this.pload = false
      try {
        let res = await api.getArticleDetail({ viewPointId: this.id })
        this.data = res.data.data
        this.getMessagechatsDetail()
        this.$nextTick(() => {
          document.title = this.data.viewPoint.title + '_中亿理投师'
        })
        this.pload = true
      } catch (error) {
      }
    },
    async getMessagechatsDetail () {
      this.pload = false
      try {
        let res = await api.getMessagechatsDetail(this.data.viewPoint.userId)
        // debugger
        this.liveData = res.data
        // this.data = res.data.data
        // this.pload = true
      } catch (error) {
      }
    },
    async updateCollectList (item) {
      let status = item.isCollect === 1 ? 0 : 1
      await api.updateCollectList({
        collectId: item.viewPointId,
        isCollect: status
      })
      window.layer.msg('操作成功')
      this.getArticleDetail()
    },
    async updateCollectPraise (item) {
      let status = item.isPraise === 1 ? 0 : 1
      await api.updateCollectPraise({
        viewPointId: item.viewPointId,
        isPraise: status
      })
      window.layer.msg('操作成功')
      this.getArticleDetail()
    },
    addAlarm () {
      let that = this
      window.layer.open({
        title: '举报文章',
        btn: ['确定', '取消'],
        skin: 'report1 report',
        type: 1,
        btnAlign: 'c',
        content: $('#reportArt'),
        yes: function (index, layero) {
          that.handleReport()
        }
      })
    },
    async handleReport () {
      try {
        if (!this.reportContent.length) {
          window.layer.msg('请输入举报内容！', {
            icon: 2
          })
          return false
        }
        await api.handleReport({
          articleType: 1,
          cause: this.reportClassify,
          detail: this.reportContent,
          articleId: this.data.viewPoint.viewPointId
        })
        if (window.layer) {
          window.layer.closeAll()
        }
        this.getArticleDetail()
        window.layer.msg('操作成功')
      } catch (error) {
        console.log(error)
      }
    },
    showReward (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再打赏！')
        return false
      }
      if (this.userId === this.data.viewPoint.userId) {
        window.layui.layer.msg('不能给自己打赏！')
        return false
      }
      this.reward = true
    },
    payFunc (money) {
      this.reward = false
      this.pay = true
      this.payMoney = money
    },
    // 显示提问弹窗
    showQuestionBox () {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再提问！')
        return false
      }
      if (this.userId === this.data.opinionLeader.userId) {
        window.layui.layer.msg('不能向自己提问！')
        return false
      }
      this.questionBoxFlag = true
      let answerPay = this.data.opinionLeader.answerPay
      if (!answerPay) {
        answerPay = 0
      }
      this.targetMasterInfo = {
        id: this.data.opinionLeader.userId,
        name: this.data.opinionLeader.authName,
        avatar: this.data.viewPoint.avatar,
        comment: this.data.opinionLeader.comment,
        field: this.data.opinionLeader.field,
        fieldId: this.data.opinionLeader.fieldId,
        answerCount: this.data.opinionLeader.answerCount | 0,
        answerPay: answerPay
      }
    },
    // 关闭提问弹窗
    closeQuestionBox () {
      this.questionBoxFlag = false
      // console.log(123123)
      // this.initDataList()
    },
    // 提交问题
    submitQuestion () {
      this.questionBoxFlag = false
      // console.log('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/content";
.articleDetails .report {
  width: 552px !important;
}
.live-test {
  width: 282px;
  box-sizing: border-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-height: 60px;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
